<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta charset="utf-8">
</head>
<style type="text/css">
    /*页脚*/
.footer{
    margin: 19px 0 80px 0;
    line-height: 25px;
    font-size: 11px;
    text-align: center;
}
.page-num{
    float: left;
    width: 24px;
    height: 24px;
    border: 1px solid #B3B3B3;
    margin: 0 0 0 4px;
    background: #fff;
    cursor: pointer;
}
.page-more{
    margin: 0 0 0 4px;
    float: left;
}
.previous-page, .next-page{
    float: left;
    width: 62px;
    height: 24px;
    border: 1px solid #B3B3B3;
    margin: 0 0 0 10px;
    background: #fff;
    cursor: pointer;
}
.previous-page:hover, .next-page:hover, .page-num:hover{
    background-color: rgb(252,250,227);
}
.active{
    background-color: rgb(252,250,227);
    border-color: rgb(145,133,118);
}
</style>
<body>
    <div class="footer">
<!--         <div class="page-num active">1</div>
        <div class="page-num ">2</div>
        <div class="page-num ">3</div>
        <div class="page-more">...</div>
        <div class="next-page">下一页</div> -->
    </div>
</body>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var currentPage = 4;
    var totalPages = 8;

    page();
    function page(){
        var currentPage = 4;
        var totalPages = 5;
        var p = '';
        //当只有一页的时候
        if(totalPages ==1){
            p += '<div class="page-num active" data-value=1>1</div>';
        }
        //当少于五页的时候
        else if (totalPages <=5){
            $(".page-more").css("display","none");
            $('').attr('class','E F G H');
            for (var i = 1; i <= totalPages; i++){
                p += '<div class="page-num" data-value='+i+'>'+i+'</div>';
            };
            p += '<div class="next-page">下一页</div>';
        }
        //当大于五页的时候
        else{
            p += '<div class="previous-page">上一页</div>';
            for(var i = currentPage-1; i <= currentPage+1; i++){
                p += '<div class="page-num" data-value='+i+'>'+i+'</div>';
            };
            p += '<div class="page-more">...</div>';
            p += '<div class="page-num" data-value='+totalPages+'>'+totalPages+'</div>';
            p += '<div class="next-page">下一页</div>';
        }
        $(".footer").html(p);
    }

    $(".previous-page").click(function(){
        currentPage =currentPage-1;
        page();
    });
    $(".next-page").click(function(){
        currentPage =currentPage+1;
        page();
    });
})

/* 不完善的地方
 * 1、不能反复调用（上下一页）
 * 2、当前页不能显示
 * 3、直接点某个页面的时候需要获取并更新当前页然后再重绘
 */
</script>
</html>